<template>
    <div class="common-layout">
        <el-container>
            <el-header>ToDoList</el-header>
            <el-main>
                <div class="list-item">
                    <div class="list-add">
                        <el-input placeholder="新增一条待办" v-model="todo" size="large" />
                        <el-button type="primary" @click="addTodo(todo)">添加</el-button>
                    </div>
                    <div class="list-total">
                        <p>总条数：{{ todolist.length }}</p>
                        <p>未完成：{{ falseList.length }}</p>
                        <p>已完成：{{ trueList.length }}</p>
                    </div>
                    <el-empty v-if="falseList.length == 0" description="你完成了所有待办！" :image-size="80" />
                    <div class="false-list" v-for="item in falseList" :key="item.id">
                        <!-- <el-checkbox v-model="item.status" :label="item.title" size="large" border /> -->
                        <div class="list-box">
                            <div class="list-title" @click="editList(item.id)" @keydown.enter="saveEdit(item.id)">
                                <el-input v-if="editId == item.id" id="edit-list" placeholder="请输入编辑的内容"
                                    v-model="editTodo" style="width: 360px;margin-right: 0" />
                                <div class="list-title" v-else>{{ item.title }}</div>
                            </div>
                            <el-radio-group :model-value="item.status.toString()" @change="changeStatus(item)"
                                size="small">
                                <el-radio-button label="已完成" value="true" />
                                <el-radio-button label="未完成" value="false" />
                            </el-radio-group>
                            <el-button class="delete-btn" type="danger" size="small"
                                @click="deleteList(item.id)">删除</el-button>
                        </div>
                    </div>
                    <el-collapse :expand-icon-position="position" v-model="activeNames">
                        <el-collapse-item title="已完成" name="1">
                            <el-empty v-if="trueList.length == 0" description="暂无完成待办" :image-size="80" />
                            <div class="true-list" v-for="item in trueList" :key="item.id">
                                <!-- <el-checkbox v-model="item.status" :label="item.title" size="large" border /> -->
                                <div class="list-box">
                                    <div class="list-title" @click="editList(item.id)"
                                        @keydown.enter="saveEdit(item.id)">
                                        <el-input v-if="editId == item.id" id="edit-list" placeholder="请输入编辑的内容"
                                            v-model="editTodo" style="width: 360px;margin-right: 0" />
                                        <div class="list-title" v-else>{{ item.title }}</div>
                                    </div>
                                    <el-radio-group fill="#67c23a" :model-value="item.status.toString()"
                                        @change="changeStatus(item)" size="small">
                                        <el-radio-button label="已完成" value="true" />
                                        <el-radio-button label="未完成" value="false" />
                                    </el-radio-group>
                                    <el-button class="delete-btn" type="danger" size="small"
                                        @click="deleteList(item.id)">删除</el-button>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref } from 'vue'
    import type { CollapseIconPositionType } from 'element-plus'

    const position = ref<CollapseIconPositionType>('left')
    const activeNames = ref(['1'])
    interface TodoList {
        id: number
        title: string
        status: boolean
    }
    const todolist = ref<TodoList[]>([])
    const trueList = ref<TodoList[]>([])
    const falseList = ref<TodoList[]>([])
    const todo = ref('')
    const clearList = () => {
        trueList.value = [],
            falseList.value = []
    }
    const clearTodo = () => {
        todo.value = ''
    }
    const classifyList = () => {
        clearList()
        if (todolist.value) {
            todolist.value.forEach(item => {
                if (item.status) {
                    if (!trueList.value.includes(item)) {
                        trueList.value.push(item)
                    }
                } else {
                    if (!falseList.value.includes(item)) {
                        falseList.value.push(item)
                    }
                }
            });
        }
    }
    const addTodo = (todo: string) => {
        if (todo) {
            todolist.value.push({
                id: new Date().getTime(),
                title: todo,
                status: false
            })
            localStorage.setItem('todolist', JSON.stringify(todolist.value))
            classifyList()
            clearTodo()
        }
    }

    const editId = ref()
    const editTodo = ref('')
    const editList = (id: number) => {
        editId.value = id
        editTodo.value = todolist.value.find(item => item.id == id)?.title as string
        setTimeout(() => {
            document.getElementById('edit-list')?.focus()
        }, 100)
    }

    const saveEdit = (id: number) => {
        todolist.value = todolist.value.map(item => {
            if (item.id == id) {
                item.title = editTodo.value
                localStorage.setItem('todolist', JSON.stringify(todolist.value))
                cancelEdit()
            }
            return item
        })
    }

    const cancelEdit = () => {
        editId.value = null
        editTodo.value = ''
    }

    const deleteList = (id: number) => {
        todolist.value = todolist.value.filter(item => item.id != id)
        localStorage.setItem('todolist', JSON.stringify(todolist.value))
        classifyList()
    }

    const changeStatus = (item: TodoList) => {
        item.status = !item.status
        classifyList()
        localStorage.setItem('todolist', JSON.stringify(todolist.value))
        console.log(todolist.value);

    }
    onMounted(() => {
        todolist.value = JSON.parse(localStorage.getItem('todolist') || '[]')
        classifyList()
    })
</script>

<style scoped>
    .common-layout {
        height: 100vh;
    }

    .el-container {
        height: 100%;
        background-color: #fff;
    }

    .el-header {
        background-color: var(--el-color-primary);
        color: #fff;
        font-size: 28px;
        font-weight: 600;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: transparent;
        color: #333;
        text-align: center;
        height: 100%;
        margin: 0 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .list-item {
        width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .list-total {
        width: 600px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }

    .true-list,
    .false-list {
        margin-bottom: 10px;
    }

    .list-box {
        width: 600px;
        min-height: 52px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        background-color: #e2e8ee;
    }

    .list-title {
        font-size: 16px;
        width: 360px;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.5;
        text-align: left;
    }

    .list-title::v-deep(.el-input__inner) {
        font-size: 16px;
    }

    .list-add {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .list-add::v-deep(.el-input__inner) {
        font-size: 18px;
    }

    .el-input {
        width: 550px;
        margin-right: 10px;
    }

    .el-button {
        width: 80px;
        height: 100%;
    }

    .el-collapse {
        width: 600px;
        border: none;
    }

    .el-collapse::v-deep {

        .el-collapse-item__header,
        .el-collapse-item__wrap {
            border: none;
        }
    }

    .delete-btn {
        width: 50px;
    }
</style>
